const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var px2rem = require("postcss-plugin-px2rem");
const CopyPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    entry: {
        app: "./src/index.js",
        panel1: "./src/pages/panel/index.js",
    },
    mode: "development",
    output: {
        path: __dirname + "/dist",
        filename: "index_[name].js",
    },
    devServer: {
        open: true, // 自动打开浏览器
        // 默认为true
        hot: true,
        host:"0.0.0.0",
        // 是否开启代码压缩
        compress: true,
        // 启动的端口
        port: 8921,
        proxy: {
            "/gss": {
                changeOrigin: true,
                target: "https://xmgl.glodon.com",
            },
        },
    },

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: "babel-loader",
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                type: "asset/inline",
            },
            {
                type: "asset",
                resourceQuery: /url/, // *.svg?url
            },
            {
                test: /\.svg$/,
                issuer: /\.js$/,
                use: [
                    {
                        loader: "@svgr/webpack",
                        options: {
                            svgo: false,
                        },
                    },
                ],
            },
            {
                test: /\.(css|less)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    {
                        loader: "less-loader",
                        options: {
                            lessOptions: {
                                javascriptEnabled: true,
                            },
                        },
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    px2rem({
                                        rootValue: 192, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                                        unitPrecision: 5, //允许REM单位增长到的十进制数字。
                                        propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                                        propBlackList: ["min-height"], //黑名单
                                        exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                                        selectorBlackList: [], //要忽略并保留为px的选择器
                                        ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
                                        replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
                                        mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
                                    }),
                                ],
                            },
                        },
                    },
                ],
            },
        ],
    },

    resolve: {
        extensions: [".js", ".jsx", ".json"], //省略文件后缀
        alias: {
            //配置别名
            "@": path.resolve(__dirname, "./src"),
            "@base": path.resolve(__dirname, "./src/components/base"),
        },
    },
    externals: {
        ue: "ue",
        ue4: "ue4",
    },
    plugins: [
        new CleanWebpackPlugin(),
        new CopyPlugin({
            patterns: [{ from: "public", to: "public" }],
        }),
        new MiniCssExtractPlugin({
            filename: "static/css/[name].css",
        }),
        new htmlWebpackPlugin({
            filename: "index.html",
            chunks: ["app"],
            template: path.resolve(__dirname, "./public/index.html"),
        }),
        new htmlWebpackPlugin({
            filename: "panel1.html",
            chunks: ["panel1"],
            template: path.resolve(__dirname, "./public/index.html"),
        }),
    ],
};
